<template>
  <!-- 父盒子 -->
  <div class="father_box">
    <slot>
      <div class="tag-box" v-if="defaultVal">
        <span class="tag-text"> {{ defaultVal }} </span>
        <p class="divider mr-1 ml-1"></p>
        <span class="tag-btn mr-1" @click="setUse(defaultVal)">常用</span>
      </div>
    </slot>
    <!-- 生成的标签 -->
    <div v-for="(item, index) in tagsList" :key="index" class="tag-box">
      <span class="tag-text">{{ item }}</span>
      <p class="divider mr-1 ml-1"></p>
      <span class="tag-btn mr-1" @click="setUse(item)">常用</span>
      <pb-icon name="close" size="12" class="close-icon" @click="removeTag(index, item)"></pb-icon>
    </div>

    <el-form-item>
      <input placeholder="输入后按<回车>创建" v-model="inputVal" @keyup.enter="addTags" class="inputTag" ref="inputTag"
        minlength="1" maxlength="10" />

    </el-form-item>
  </div>
</template>

<script setup lang="ts">
import { createMessage } from '@/Public-UIlibrary/pb-message/method';

const inputVal = ref("");

const props = defineProps({
  tagsList: {
    type: Array,
    default: [],
  },
  defaultVal: {
    type: String,
    default: ''
  }
});

const emits = defineEmits(["setTag", "delTag", "addTag"]);

// 删除标签
const removeTag = (idx: number, item: string) => {
  emits("delTag", idx, item);
};

// 添加标签
const addTags = () => {
  if (!inputVal.value) return;
  let reg = /^[\u4E00-\u9FA5A-Za-z]{1,10}$/
  if (reg.test(inputVal.value)) {
    emits("addTag", inputVal.value);
    inputVal.value = "";
  } else {
    createMessage({
      type: 'error',
      message: '别名不合法,最多包含1-10位字母和中文'
    })
  }
};

// 设置常用
const setUse = (data: string) => {
  emits("setTag", data);
};

defineExpose({ setUse });
</script>

<style scoped>
/* 外层div */
.father_box {
  width: 100%;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* 标签 */
.tag-box {
  padding: 2px 8px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 4px 8px 4px 0;
  text-wrap: nowrap;
}

/* 标签文字 */
.tag-text {
  font-family:
    PingFang SC,
    PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
  line-height: 22px;
}

.tag-btn {
  font-family:
    PingFang SC,
    PingFang SC;
  font-weight: 400;
  font-size: 12px;
  color: var(--pb-color-primary);
  line-height: 18px;
  cursor: default;

  &:hover {
    transform: scale(1.1);
  }
}

/* 鼠标经过叉叉 */
.close-icon:hover {
  background-color: var(--pb-color-primary);
  border-radius: 50%;
  color: #fff;
}

.inputTag {
  font-size: 14px;
  border: none;
  box-shadow: none;
  outline: none;
  background-color: transparent;
  padding: 0;
  width: auto;
  min-width: 150px;
  vertical-align: top;
  height: 32px;
  color: rgba(0, 0, 0, 0.85);
  line-height: 32px;
}

/* 输入框提示文字大小 */
input:placeholder-shown {
  font-size: 14px;
}

input:focus {
  /* 设置光标颜色为红色 */
  caret-color: var(--pb-color-primary);
}
</style>
